<template>
  <div>
    <n-grid x-gap="5" y-gap="5">
      <n-grid-item :span="24">
        <n-space justify="center">
          <n-image
            v-if="row?.poseExampleBackground"
            :preview-disabled="true"
            :width="400"
            :object-fit="'cover'"
            :src="fileFunction.getOpenPoseImage(row?.poseExampleBackground)">
          </n-image>
          <n-empty v-else description="未选择">

          </n-empty>
        </n-space>
      </n-grid-item>
      <n-grid-item :span="12">
        <n-button block type="warning" @click="cancleOpenPose">撤销</n-button>
      </n-grid-item>
      <n-grid-item :span="12">
        <n-button block type="primary" @click="openPoseViewShow = true">选择</n-button>
      </n-grid-item>
    </n-grid>

    <n-drawer display-directive="show" v-model:show="openPoseViewShow" :width="1200">
      <n-drawer-content title="从骨骼图选择" closable>
        <OpenPoseView mode="choseOpenPose" :choseOpenPose="chosenOpenPose"></OpenPoseView>
      </n-drawer-content>
    </n-drawer>

  </div>
 </template>

<script setup lang="ts">
//@ts-ignore
import fileFunction from '@/libs/globalFunction/file.js'
import {ref} from "vue";
import OpenPoseView from "@/views/pages/configuration/openpose/index.vue";
import {storyBoardController} from "@/api/controller/story/storyBoard.api";


const loading = ref(false)
const value = ref('')
const openPoseViewShow = ref(false)
const props = defineProps({
    row: {
        type: Object,
        default: () => {
            return {}
        }
    },
  updateStoryBoardByNum:{
    type: Function,
    default: () => {

    }
  }
})

const chosenOpenPose = (openPose: any) => {
  props.row.openPose = openPose.id
  props.row.poseExampleBackground = openPose.poseName
  updateBoard(props.row)
  openPoseViewShow.value = false
}

const updateBoard = () => {
  const param = {...props.row}
  delete param.characterList
  storyBoardController.addOrUpdateBoard(param).then(res => {
    if (res.code == 200) {
      window.$message.success('操作成功!')
    }
  })
}

const cancleOpenPose = () => {
  props.row.poseExampleBackground = null
  props.row.poseExampleImage = null
  props.row.openPose = null
  updateBoard(props.row)
}
</script>

